<template>
  <div class="login-page">
    <!--<xj-dialog :title="isLoginPage?'登录':'注册'" :visible="true"-->
    <!--           width="400px">-->
    <div class="project-title">
      <span>规则引擎-规则设计器</span>
    </div>
    <div class="login-box">
      <div class="title">
        <div class="text">{{ isLoginPage ? '登录' : '注册' }}</div>
        <el-popover
            placement="top-start"
            title="设置"
            trigger="click"
            width="220">
          <div class="setting-box">
            <!--<div class="row">-->
            <!--  <div class="text">粒子效果</div>-->
            <!--  &lt;!&ndash;<el-switch v-model="setting.lzxg"/>&ndash;&gt;-->
            <!--  <el-select v-model="setting.lzxg" placeholder="粒子效果" style="width: 100px">-->
            <!--    <el-option label="无" value=""/>-->
            <!--    <el-option label="效果一" value="xg1"/>-->
            <!--  </el-select>-->
            <!--</div>-->
          </div>
          <div slot="reference" class="set-btn"></div>
        </el-popover>
      </div>
      <el-form v-show="isLoginPage" :model="loginForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="loginForm.dlbm"
                    autocomplete="off"
                    @keypress.enter.native="login"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginForm.kl"
                    autocomplete="off"
                    show-password type="password" @keypress.enter.native="login">
            <div slot="append">
              <el-link @click="handleWjklBtnClick">忘记密码</el-link>
            </div>
          </el-input>
        </el-form-item>
        <el-form-item>
          <span style="vertical-align: middle">
            测试请使用
            <el-link type="primary" @click="inputTest">测试账户</el-link>
            登录
          </span>
        </el-form-item>
      </el-form>
      <el-form v-show="!isLoginPage" :model="registForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="registForm.dlbm"></el-input>
        </el-form-item>
        <el-form-item label="显示名称">
          <el-input v-model="registForm.mc"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="registForm.kl" show-password type="password"></el-input>
        </el-form-item>
        <el-form-item label="重复密码">
          <el-input v-model="registForm.rpkl" show-password type="password"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <div v-show="isLoginPage">
          <el-link style="margin-right: 20px" type="primary" @click="isLoginPage=false">没有账户，立即注册</el-link>
          <el-button type="primary" @click="login()">登录</el-button>
        </div>
        <div v-show="!isLoginPage">
          <el-link style="margin-right: 20px" type="primary" @click="isLoginPage=true">已有账户，立即登录</el-link>
          <el-button type="primary" @click="regist()">注册</el-button>
        </div>
      </div>
    </div>
    <!--</xj-dialog>-->
  </div>
</template>

<script>
import XjDialog from "@/components/XjDialog";
import mouseclick from '../util/mouseclick'
import md5 from "md5";

export default {
  components: { XjDialog },
  name: "Login",
  data () {
    return {
      isLoginPage: true,
      registForm: {
        dlbm: '',
        mc: '',
        kl: '',
        rpkl: '',
      },
      loginForm: {
        dlbm: '',
        kl: '',
      },
      setting: {}
    }
  },
  watch: {
    setting: {
      handler (val) {
        myLocalStorage.setItem("setting", val)
        mouseclick.setLzxg(val.lzxg)
      },
      deep: true
    }
  },
  mounted () {
    this.setting = myLocalStorage.getItem("setting", { lzxg: true })
  },
  methods: {
    handleWjklBtnClick () {
      this.$confirm("请联系系统管理员")
    },
    inputTest () {
      this.loginForm.dlbm = 'test'
      this.loginForm.kl = 'test'
    },
    async login () {
      try {
        let res = await this.$api.dl({
          dlbm: this.loginForm.dlbm,
          kl: md5(this.loginForm.kl)
        })
        mySessionStorage.setItem("yhxx", res.yhxx)
        // this.$store.commit("setYhxx", res.yhxx)
        // let afterLogin = mySessionStorage.getItem("afterLogin")
        // if (afterLogin) {
        //   mySessionStorage.removeItem("afterLogin")
        //   this.$router.replace(afterLogin)
        // } else {
        document.title = res.yhxx.mc + "-" + document.title
        this.$router.replace("/")
        // }
      } catch (e) {
        this.$message({
          message: e.message,
          type: "error"
        })
      }
    },
    async regist () {
      try {
        if (this.registForm.kl !== this.registForm.rpkl) {
          throw new Error("两次密码不相同")
        }
        let res = await this.$api.addYh({
          dlbm: this.registForm.dlbm,
          mc: this.registForm.mc,
          kl: md5(this.registForm.kl)
        })
        this.loginForm = { dlbm: this.registForm.dlbm, kl: '' }
        this.registForm = { dlbm: '', kl: '', mc: '', rpkl: '' }
        this.isLoginPage = true
      } catch (e) {
        this.$message({ message: e.message, type: 'error' })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  //background-color: #a8a8a8;
  background-color: #e0e0e0;
  box-sizing: border-box;
  padding-top: 15vh;

  .project-title {
    text-align: center;

    span {
      font-size: 60px;
      cursor: default;
      transition: all 0.5s;
      -webkit-text-stroke: 1px #228DFF;
      //-webkit-text-fill-color: transparent;

      &:hover {
        color: #ffffff;
        animation: neon2 1.5s ease-in-out infinite alternate;
      }
    }
  }

  .login-box {
    margin: 0 auto;
    margin-top: 15vh;
    width: 400px;
    //background-color: white;
    background-color: #efefef;
    //height: 300px;
    border-radius: 5px;
    padding: 30px 20px;

    .title {
      padding: 0 20px 20px;
      display: flex;
      align-items: center;

      .text {
        font-size: 30px;
        flex: 1;
      }

      .set-btn {
        width: 24px;
        height: 24px;
        background-image: url(~@/assets/svg/set.svg);
        background-size: 100%;
        cursor: pointer;
      }
    }

    .dialog-footer {
      text-align: right;
    }
  }
}

.setting-box {
  .row {
    display: flex;
    align-items: center;

    .text {
      flex: 1;
      flex-shrink: 0;
    }
  }
}

@keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #228DFF,
    0 0 70px #228DFF,
    0 0 80px #228DFF,
    0 0 100px #228DFF,
    0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #fff,
    0 0 20px #228DFF,
    0 0 35px #228DFF,
    0 0 40px #228DFF,
    0 0 50px #228DFF,
    0 0 75px #228DFF;
  }
}
</style>
